<template>
  <div>
    <Card style="margin: 10px; margin-bottom: 20px">
      <Row type="flex" justify="space-between" align="bottom">
        <Col :span="12">
          <Form :model="form" :label-width="80">
            <FormItem label="关键字" style="width: 400px">
              <Input v-model="requestParams.keyword" placeholder="根据编号搜索"></Input>
            </FormItem>
          </Form>
        </Col>
        <Col :span="12" flex="0 0 13%" order>
          <Button style="margin-right: 10px" @click="clear">清除</Button>
          <Button type="primary" @click="search">搜索</Button>
        </Col>
      </Row>
      <el-alert style="margin: 20px 0" :title="title" type="info" show-icon :closable="false"> </el-alert>
      <Table :columns="columns1" :data="data1">
        <template slot-scope="{ row }" slot="questionIDs">
          <a style="display: block; color: #279fff; margin: 2px 0" @click.stop='getPre(item.id)' v-for="item in row.questionIDs" :key="item.number">{{ item.number }}</a>
        </template>
        <template slot-scope="{ row,index }" slot="action">
          <Button @click="delList(row,index)" type="error" shape="circle" icon="ios-trash-outline"></Button>
        </template>
      </Table>
      <Page
        :page-size-opts="[20, 30, 50, 100]"
        @on-page-size-change="changeSize"
        @on-change="changePage"
        :total="total"
        :current="requestParams.page"
        :page-size="requestParams.pagesize"
        show-elevator
        show-sizer
      />
    </Card>
    <questionsPreview :isShow.sync="isShow" :questionsId="questionsId"></questionsPreview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import questionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  data () {
    return {
      form: {},
      title: '', // 提示信息标题
      columns1: [
        {
          title: '编号',
          key: 'id',
          minWidth: 200
        },
        {
          title: '题型',
          key: 'questionType',
          minWidth: 140
        },
        {
          title: '题型编号',
          key: 'questionIDs',
          slot: 'questionIDs',
          minWidth: 240
        },
        {
          title: '录入时间',
          key: 'addTime',
          minWidth: 200
        },
        {
          title: '答题时间',
          key: 'totalSeconds',
          minWidth: 140
        },
        {
          title: '正确率(%)',
          key: 'accuracyRate',
          minWidth: 120
        },
        {
          title: '录入人',
          key: 'userName',
          minWidth: 120
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 120
        }
      ],
      data1: [],
      requestParams: {
        keyword: null,
        page: 1,
        pagesize: 20
      },
      total: 0,
      questionsId: 0, // 试题预览
      isShow: false
    }
  },
  components: {
    questionsPreview
  },
  async created () {
    this.randoms()
  },
  methods: {
    async randoms (removeRandoms) {
      const list = await randoms(removeRandoms)
      console.log(list)
      this.total = list.data.counts
      this.title = `数据一共${list.data.counts}条`
      this.data1 = list.data.items
      // console.log(this.data1)
      // console.log(this.data1.questionIDs)
    },
    async delList (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms(row)
          await this.randoms()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    changePage (page) {
      // console.log(page)
      this.requestParams.page = page
      // console.log(this.requestParams)
      this.randoms(this.requestParams)
    },
    changeSize (pagesize) {
      this.requestParams.pagesize = pagesize
      // console.log(this.requestParams)
      this.randoms(this.requestParams)
    },
    search () {
      console.log(this.keyword)
      if (this.requestParams.keyword) {
        this.randoms(this.requestParams)
      }
    },
    clear () {
      this.requestParams.keyword = ''
    },
    getPre (id) {
      console.log(id)
      this.isShow = true
      this.questionsId = id
    }
  }
}
</script>

<style scoped lang='less'></style>
